<!-- <script>
export default {
  data() {
    return {
      msg: '你笑起来真好看'
    }
  },
}
</script> -->

<script setup lang="ts">
// 在组合式 API 中无法使用 this,因为 this 是 undefined(setup 会在创建实例之前执行)
import { ref } from 'vue'
import type {Ref} from 'vue'
// ref：让数据具备响应式
// ref 相当于给你的内容做一个代理，通过 proxy
/*
  Proxy({
    get (){
      return ''
    },
    set (newValue){

    }
  })
*/
let msg:Ref<string> = ref('像春天的花一样')

function changeMsg() {
  // console.log(this);

  console.log(msg);

  // 在 js 中你想改变数据，必须要 .value
  msg.value = '你好世界'
}
</script>

<template>
  <div>
    <!-- 在模板中修改数据，无需使用 .value -->
    <!-- <button @click="msg = '你好中国'">修改 msg</button> -->
    <button @click="changeMsg">修改 msg</button>
    <h1>{{ msg }}</h1>

  </div>
</template>

<style scoped></style>
